Hallo teman – teman semuanya kembali lagi bersama saya asrul puadi kontributor dari SistemIT.com. Kali ini saya akan membagikan tutorial cara menambahkan slide show gambar pada laman aplikasi atau project kita, tentunya masih seuptar sistem informasi berbasis web.
Slide show gambar ini pernah saya gunakan pada lawan sistem informasi project kuliah saya.
Slide Show Gambar
- Untuk peletakkan slide show gambarnya teman – teman boleh meletakkannya di tampilan home sistem informasi yang teman – teman gunakan. Teman – teman bisa mengetikkan kode berikut ini:
- Buat file CSS dan ketikkan kode berikut ini:
- Tambahkan link css di dalam tag head html
<di> <ul class="images"> </br> <li class = "show"><img width = "500px" height = "500px" src = "images/rahn.png" alt = "photo_one"/></li> <li><img width = "500px" height = "500px" src = "images/emas.jpg" alt = "photo_two"/></li> <li><img width = "500px" height = "500px" src = "images/banner-emasku.jpg" alt = "photo_three"/></li> <li><img width = "500px" height = "500px" src = "images/pict2.jpg" alt = "photo_four"/></li> <li><img width = "500px" height = "500px" src = "images/pict.jpg" alt = "photo_five"/></li> <li><img width = "500px" height = "500px" src = "images/rahn1.jpg" alt = "photo_six"/></li> <li><img width = "500px" height = "500px" src = "images/main-logo-1.png" alt = "photo_seven"/></li> <li><img width = "500px" height = "500px" src = "images/arrum.jpg" alt = "photo_eight"/></li> <li><img width = "500px" height = "500px" src = "images/emas.jpg" alt = "photo_nine"/></li> <li><img width = "500px" height = "500px" src = "images/banner-rahn.png" alt = "photo_ten"/></li> </ul> </div>
src = “images/rahn.png” adalah lokasi penyimpanan file gambar di dalam project yang teman – teman gunakan.
ul.images {
width:500px;
height:500px;
overflow:hidden;
position:relative;
margin:0;
padding:;
}
ul.images li {
position:absolute;
margin:0;
padding:0;
left:0;
right:0;
list-style:none;
}
ul.images li.show {
z-index:500;
}
ul img {
border:none;
}
ul#images {
margin: 0 15px 10px 0;
padding: 0;
list-style: none;
position: relative;
}
ul#images li {
display: block;
overflow: hidden;
padding: 0;
float: left;
width: 155px;
height: 300px;
}
<head> <title>Sistem InformasiPegadaian Syariah</title> <link rel="stylesheet" type="text/css" href="css/style.css" /> </head>
Untuk file cssnya saya beri nama style.css
Teman – teman bisa mencobanya langsung di project/tugas teman – teman. Semoga tutorial ini bisa bermanfaat bagi teman – teman semuanya.
Untuk mempelajari tutorial lainnya teman – teman bisa mengunjungi laman ini : Sistem.IT.com
